<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jQuery筛选DOM API</title>
		<script src="js/jquery-1.12.4.js" type="text/javascript">
			
		</script>
		<style type="text/css">
			
			body{
				margin: 0;
			}
			
			div{
				background-color: #0f0;
				margin: 5px;
				border: 3px solid #000;
			}
			
			#containerDiv{
				background-color: #f00;
				
			}
		</style>
	</head>
	<body>
		<div id="containerDiv">
			<div class="cls1">
				1---
				<div class="cls1">1---11</div>
			</div>
			<div id="div2">2---</div>
			<div>3---</div>
			<div>4---</div>
			<div>5---</div>
			<div>6---</div>
			<div id="div7">7---</div>
			<div>8---</div>
			<div>9---</div>
			<div>10---</div>
		</div>
		
		<script type="text/javascript">
			$(function(){
			//DOM API , 不是选择器!
			    // ■ 1）.parent() -- 获得父亲节点 -->> parentNode
				// $('#div2').parent().css('background-color','#0ff');	
				
				// ■ 2）.children() -- 获得子节点集合
			    //   ● 可以加上有选择器如：.first() 
				// $('#containerDiv').children().first().css('background-color','#0ff');
				
				// 	.last()
				// $('#containerDiv').children().last().css('background-color','#0ff');
				
				// 	eq(i|-i) -- eq里面的i整数从0开始,负数从-1开始
				// 选第三 -- 相当于eq(2)
				// $('#containerDiv').children().eq(2).css('background-color','#0ff');
				
				// 倒数第三 -- 相当于eq(-3)
				// $('#containerDiv').children().eq(-3).css('background-color','#0ff');
			
				// ■ 3）.next() -- 后一个兄弟节点
				// $('#div2').next().css('background-color','#0ff');
				
				// ■ 4）.nextall() -- 后面所有的兄弟节点
				// $('#div2').nextAll().css('background-color','#0ff');
				
			    // ■ 5）.prev() -- 前一个兄弟节点 ==> .previousElementSlibling
				// $('#div7').prev().css('background-color','#0ff');
				
			    // ■ 6）.prevall() -- 前面所有的兄弟节点
				// $('#div7').prevAll().css('background-color','#0ff');
				
			    // ■ 7）.siblings() -- 除了自己以外，所有的兄弟节点
				// $('#div2').siblings().css('background-color','#0ff');
			
				// 经常用到 
				// .children(selector) 子元素
				// .find(selector) 所有后代元素
				// $('#containerDiv').children('.cls1').css('background-color','#0ff');
				$('#containerDiv').find(".cls1").css('background-color','#0ff');
				
			
			});
			
		</script>
	</body>
</html>
